<!--
 * @Description  :table组件 查询框 + table + 分页
 * @Author       : zhao
 * @Date         : 2022-06-28 11:16:18
 * @LastEditors  : zhao
 * @LastEditTime : 2023-01-10 15:51:51
-->

<template>
    <div class="table">
        <div class="acq">
            <div class="acq-search">
                <zsearch :searchType="searchType" />
            </div>
            <div class="acq-table">
                <ztable :tableHeader="tableHeader" :tableData="theTableData" />
            </div>
            <div class="acq-page">
                <zpagination />
            </div>
        </div>
    </div>
</template>

<script>
import zsearch from "./search.vue"
import ztable from "./table.vue"
import zpagination from "./pagination.vue"

export default {
    name: "",
    data() {
        return {
            theTableData: [],
        }
    },
    props: {
        searchType: Array,
        tableHeader: Array,
        tableType: Array,
        tableData: Array,
    },
    components: { zsearch, ztable, zpagination },
    watch: {
        "$store.state.table.tableData"(val) {
            this.theTableData = val
        },
    },

    computed: {},

    mounted() {},

    methods: {},
}
</script>
<style lang='scss' scoped>
.table {
    height: 100%;
    overflow: hidden;
}

.acq {
    padding: 20px 20px 0;

    .acq-search {
        width: 100%;
    }
}

.acq-table {
    // margin: 10px 0;
    // background: white;
    // overflow: hidden;
    // padding: 0 10px;
    // border-radius: 7px;
    // box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
    border: 1px solid #eee;
    margin: 10px 0;
}

.acq-page {
    float: right;
}
</style>